﻿(function ($) {
    var flag = 'data-zimage';
    var bigImageSrcFlag = 'data-zimage-src';

    //$(document).ready(function () {
        $(document).on('click', 'img[' + flag + ']', function (e) {
            
            var ww = $(window).width();
            var wh = $(window).height();
            var orgImg = $(this);
           
            var src = orgImg.attr(bigImageSrcFlag) || orgImg.attr('src');
            var ig = new Image();
            ig.onerror = function () { 
            				// alert('加载图片失败');
            				failHint('加载图片失败');
            			 };
            ig.onload = function (ev) {
                var bigW, bigH;
                bigW = ig.width;
                bigH = ig.height;

                if (bigH > wh || bigW > ww) {
                    var wr = ww / wh;
                    var br = bigW / bigH;
                    if (br > wr) {
                        var innerw = ww/1.5 - 100;
                        bigH = innerw * bigH / bigW;
                        bigW = innerw;
                    }
                    else {
                        var innerh = wh/1.5 - 100;
                        bigW = innerh * bigW / bigH;
                        bigH = innerh;
                    }
                }
                var left = (ww - bigW) / 2;
                var top = (wh - bigH) / 2;
                var cloneImg = orgImg.clone().removeAttr(flag).attr('src', src);
                var offset = orgImg.offset();
                cloneImg.appendTo($('body'));
                cloneImg.css({ 'position': 'absolute', 'z-index': 99999, 'width': orgImg.width() + 'px', 'height': orgImg.height() + 'px' }).offset(offset);
                cloneImg.animate({ width: bigW + 'px', height: bigH + 'px', left: left + 'px', top: top + 'px', opacity: 1 },
                    function () {
                        var mask = $("<div>").css({ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', 'z-index': 99998, background: '#fff', opacity: .0 }).appendTo("body").animate({ opacity: .0 }, 'fast');
                        cloneImg.css({ 'box-shadow': '0px 0px 10px rgba(0,0,0,.6)' });
                        $([mask, cloneImg]).each(function () {
                            this.click(function () {
                                cloneImg.animate({ 'width': orgImg.css('width'), 'height': orgImg.css('height'), 'left': offset.left + 'px', 'top': offset.top + 'px' },
                                    function () {
                                        cloneImg.remove();
                                        mask.animate({ opacity: .0 }, 'fast', function () { mask.remove() });
                                    });
                            });
                        })
                    })
            }
            ig.src = src;
            delete ig;
            event.preventDefault();
            event.returnValue = false
           
            return false;
        })
    //});
})(jQuery);